<template>
  <ul class="ulthree">
    <li v-for="item in data3">
      <router-link to="/detail">
        <img :src="item.src" alt="">
        <p class="onep">{{item.tit}}</p>
        <img :src="item.src2" alt="">
        <span>{{item.txt}}</span>
        <p class="twop">{{item.txt2}}</p>
      </router-link>
    </li>
  </ul>
</template>

<script>
  export default {
    name: "Show1",
    data(){
      return {
        data3:[
          {src:'/static/lyl/l1.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/t2.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/l1.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/t4.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/l1.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/t2.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/l1.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/t4.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/l1.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/t2.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/l1.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
          {src:'/static/lyl/l1.png',tit:'阳澄湖大闸蟹',src2:'/static/lyl/xing.png',txt:'￥62/人',txt2:'浙江省台州市温岭市人民西路2号'},
        ]
      }
    }
  }
</script>

<style scoped>
  .ulthree{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .ulthree li{
    width: 305px;
    background: #f8f6f7;
    text-align: center;
    padding-bottom: 17px;
    margin-bottom: 20px;
    border: 1px solid #f8f6f7;
    cursor: pointer;
  }
  .ulthree li:hover{
    border: 1px solid #498e3d;
  }
  .ulthree li a img:nth-child(1){
    width: 100%;
    height: 170px;
  }
  .ulthree li .onep{
    font-size: 24px;
    line-height: 30px;
    margin: 15px 0;
  }
  .ulthree li span{
    font-size: 18px;
    color: #ec6a17;
  }
  .ulthree li .twop{
    font-size: 16px;
    line-height: 36px;
    color: #666;
  }
</style>
